<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Introduction to Tkinter</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Tkinter, programming, Linux, Introduction">
<meta name="description" content="This part of the Tkinter tutorial is an introduction to Tkinter.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to Tkinter</h1>

<p>
In this part of the Tkinter tutorial, we will introduce the Tkinter toolkit and
create our first programs.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
The purpose of this tutorial is to get you started with the Tkinter toolkit.
Images used in this tutorial can be downloaded <a href="/img/gui/tkinter/images.zip">here</a>. 
I used some icons from the Tango icons pack of the Gnome project. 
</p>


<h2>Tkinter</h2>

<p>
<b>Tkinter</b> is a Python binding to the Tk GUI toolkit. Tk is the original GUI
library for the Tcl language. Tkinter is implemented as a Python wrapper around 
a complete Tcl interpreter embedded in the Python interpreter. There are several
other popular Python GUI toolkits. Most popular are wxPython, PyQt and PyGTK.
</p>


<h2>Python</h2> 
 
<p> 
<img src="/img/gui/tkinter/pythonlogo.png" style="float: left;" alt="python logo"> 
Python is a general-purpose, dynamic, object-oriented programming language. 
The design purpose of the Python language emphasizes programmer productivity 
and code readability. Python was initially developed by <b>Guido van Rossum</b>. 
It was first released in 1991. Python was inspired by ABC, Haskell, Java, Lisp, Icon
and Perl  programming languages. Python is a high level, general purpose, 
multiplatform, interpreted language.  
Python is a minimalistic language. One of its most visible features is that it does 
not use semicolons nor brackets. Python uses indentation instead. 
There are two main branches of Python currently. Python 2.x and Python 3.x. Python 3.x
breaks backward compatibility with previous releases of Python. It was created to
correct some design flaws of the language and make the language more clean. 
The most recent version of Python 2.x is 2.7.1, and of Python 3.x 3.1.3.
This tutorial is written in Python 2.x. Most of the code is written in Python
2.x versions. It will take some time till the software base and programmers will 
migrate to Python 3.x. 
Today, Python is maintained by a large group of volunteers worldwide. 
Python is open source software. 
</p> 
 
<p> 
Python is an ideal start for those, who want to learn programming. 
</p> 
 
<p> 
Python programming language supports several programming styles. It does not 
force a programmer to a specific paradigm.  Python supports object oriented and 
procedural programming. There is also a limited support for functional programming.
</p> 
 
<p> 
The official web site for the Python programming language is <a href="http://python.org">python.org</a> 
</p> 


<h2>Simple example</h2>

<p>
In our first example, we will show a basic window on the screen. 
</p>

<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

This script shows a simple window
on the screen.

author: Jan Bodnar
last modified: January 2011
website: www.zetcode.com
"""

from Tkinter import Tk, Frame, BOTH


class Example(Frame):
  
    def __init__(self, parent):
        Frame.__init__(self, parent, background="white")   
         
        self.parent = parent
        
        self.initUI()
    
    def initUI(self):
      
        self.parent.title("Simple")
        self.pack(fill=BOTH, expand=1)
        

def main():
  
    root = Tk()
    root.geometry("250x150+300+300")
    app = Example(root)
    root.mainloop()  


if __name__ == '__main__':
    main()  
</pre>

<p>
While this code is very small, the application window can do quite a lot. 
It can be resized, maximized, minimized. All the complexity that comes 
with it has been hidden from the application programmer. 
</p>


<pre class="explanation">
from Tkinter import Tk, Frame
</pre>

<p>
Here we import <code>Tk</code> and <code>Frame</code> classes. The first
class is used to create a root window. The latter is a container for other
widgets. 
</p>


<pre class="explanation">
class Example(Frame):
  
    def __init__(self, parent):
        Frame.__init__(self, parent, background="white")   
</pre>

<p>
Our example class inherits from the <code>Frame</code> container widget. 
In the <code>__init__()</code> constructor method we call the constructor
of our inherited class. The <code>background</code> parameter specifies the
background color of the <code>Frame</code> widget.
</p>

<pre class="explanation">
self.parent = parent
</pre>

<p>
We save a reference to the parent widget. The parent widget is the
Tk root window in our case.
</p>

<pre class="explanation">
self.initUI()
</pre>

<p>
We delegate the creation of the user interface to the <code>initUI()</code> method.
</p>


<pre class="explanation">
self.parent.title("Simple")
</pre>

<p>
We set the title of the window using the <code>title()</code> method.
</p>

<pre class="explanation">
self.pack(fill=BOTH, expand=1)
</pre>

<p>
The <code>pack()</code> method is one of the three geometry managers in
Tkinter. It organizes widgets into horizontal and vertical boxes. Here
we put the <code>Frame</code> widget, accessed via the self attribute
to the Tk root window. It is expanded in both directions. In other words,
it takes the whole client space of the root window.
</p>

<pre class="explanation">
root = Tk()
</pre>

<p>
The root window is created. The root window is a main application window
in our programs. It has a title bar and borders. These are provided by
the window manager. It must be created before any other widgets.
</p>

<pre class="explanation">
root.geometry("250x150+300+300")
</pre>

<p>
The <code>geometry()</code> method sets a size for the window and
positions it on the screen. The first two parameters are width and
height of the window. The last two parameters are x, y screen coordinates.
</p>

<pre class="explanation">
app = Example(root)
</pre>

<p>
Here we create the instance of the application class. 
</p>

<pre class="explanation">
root.mainloop()  
</pre>

<p>
Finally, we enter the mainloop. The event handling starts from this point. 
The mainloop receives events from the window system and dispatches them to 
the application widgets. It is terminated when we click on the close button
of the titlebar or call the <code>quit()</code> method.
</p>

<img src="/img/gui/tkinter/simple.png" alt="Simple">
<div class="figure">Figure: Simple window</div>



<h2>Centering window</h2>

<p>
This script centers a window on the screen. 
</p>

<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

This script centers a small
window on the screen. 

author: Jan Bodnar
last modified: January 2011
website: www.zetcode.com
"""

from Tkinter import Tk, Frame, BOTH



class Example(Frame):
  
    def __init__(self, parent):
        Frame.__init__(self, parent, background="white")   
         
        self.parent = parent
        self.parent.title("Centered window")
        self.pack(fill=BOTH, expand=1)
        self.centerWindow()

    def centerWindow(self):
      
        w = 290
        h = 150

        sw = self.parent.winfo_screenwidth()
        sh = self.parent.winfo_screenheight()
        
        x = (sw - w)/2
        y = (sh - h)/2
        self.parent.geometry('%dx%d+%d+%d' % (w, h, x, y))

def main():
  
    root = Tk()
    ex = Example(root)
    root.mainloop()  


if __name__ == '__main__':
    main()  
</pre>

<p>
We need to have the size of the window and the size of the screen 
to position the window in the center of the monitor screen. 
</p>

<pre class="explanation">
w = 290
h = 150
</pre>

<p>
These are the width and height values of the application window.
</p>

<pre class="explanation">
sw = self.parent.winfo_screenwidth()
sh = self.parent.winfo_screenheight()
</pre>

<p>
We determine the width and height of the screen. 
</p>

<pre class="explanation">
x = (sw - w)/2
y = (sh - h)/2
</pre>

<p>
We calculate the required x, y coordinates. 
</p>

<pre class="explanation">
self.parent.geometry('%dx%d+%d+%d' % (w, h, x, y))
</pre>

<p>
Finally, the <code>geometry()</code> method is used
to place the window in the center of the screen. 
</p>



<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

This program creates a quit
button. When we press the button,
the application terminates. 

author: Jan Bodnar
last modified: December 2010
website: www.zetcode.com
"""

from Tkinter import Tk, BOTH
from ttk import Frame, Button, Style


class Example(Frame):
  
    def __init__(self, parent):
        Frame.__init__(self, parent)   
         
        self.parent = parent
        
        self.initUI()
        
    def initUI(self):
      
        self.parent.title("Quit button")
        self.style = Style()
        self.style.theme_use("default")

        self.pack(fill=BOTH, expand=1)

        quitButton = Button(self, text="Quit",
            command=self.quit)
        quitButton.place(x=50, y=50)


def main():
  
    root = Tk()
    root.geometry("250x150+300+300")
    app = Example(root)
    root.mainloop()  


if __name__ == '__main__':
    main()  
</pre>

<p>
We position a <code>Button</code> on the window. Clicking on the button will
terminate the application.
</p>

<pre class="explanation">
from ttk import Frame, Button, Style
</pre>

<p>
Tkinter supports theming of widgets. Widgets that are themed can be
imported from the ttk module. At the time of this writing, not all
widgets are themable. For instance, menus or listboxes are not supported so far.
</p>

<pre class="explanation">
self.style = Style()
self.style.theme_use("default")
</pre>

<p>
We apply a theme for our widgets. Some of the supported themes are clam,
default, alt or classic.
</p>

<pre class="explanation">
quitButton = Button(self, text="Quit",
    command=self.quit)
</pre>

<p>
We create an instance of the <code>Button</code> widget. The parent of this
button is the <code>Frame</code> container. We provide a label for the button
and a command. The command specifies a method that is called when we press
the button. In our case the <code>quit()</code> method is called, which
terminates the application.  
</p>

<pre class="explanation">
quitButton.place(x=50, y=50)
</pre>

<p>
We use the <code>place</code> geometry manager to position the button
in absolute coordinates. 50x50px from the top-left corner of the window.
</p>

<img src="/img/gui/tkinter/quitbutton.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>


<p>
This section was an introduction to the Tkinter toolkit.
</p>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified January 6, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

